<template>
  <div>
    <div class="header">
      <van-icon @click="goback" size="22px" name="arrow-left" />
      <div style="flex: 1"></div>
    </div>
    <div class="space"></div>
    <div class="content">
      <div class="name">{{ data.name }}</div>
      <div class="address">
        <van-icon name="location-o" />{{ data.city }} {{ data.area }}
        {{ data.adress }}
      </div>
      <div class="newprice">
        <span>最新挂牌价</span>
        <span @click="follow">跟踪</span>
      </div>
      <div class="showpri">
        <div>
          <div class="tip">
            <!-- <span class="box up">15000</span>元/m<span class="uptip">2</span> -->
            <span>暂无数据</span>
          </div>
          <div>当月均价</div>
        </div>
        <div>
          <div class="tip">
            <!-- <span class="triangledown"></span><span class="box down">2.1%</span> -->
            <span>暂无数据</span>
          </div>
          <div>比上一月</div>
        </div>
      </div>
      <div class="service">
        <div @click="jumptoeva" class="onebox">
          <div>我是业主</div>
          <div>估价出售</div>
        </div>
        <div @click="jumptobuyseek" class="twobox">
          <div>我要买房</div>
          <div>立即约看</div>
        </div>
      </div>
      <div class="tipsword">
        相似楼盘房源
        <div @click="changebuyhouse"><van-icon name="replay" />换一批</div>
      </div>
      <div class="same">
        <div v-show="samehouselist.length != 0">
          <div
            @click="jumptobuydetail(item.houseId, item)"
            v-for="(item, index) in samehouselist"
            :key="index"
          >
            <div v-show="item.subdistrict" class="house">
              <img :src="item.houseImage" />
              <div class="intrduce">
                <div class="title1">{{ item.subdistrict }}</div>
                <div class="title2">
                  <span>{{ item.houseType }}</span
                  >|<span>{{ item.coveredArea }}m<span class="up">2</span></span
                  >|<span>{{ item.floor }}</span>
                </div>
                <div class="tips">
                  <span v-show="item.aspectType">{{ item.aspectType }}</span>
                  <span v-show="item.decoration">{{ item.decoration }}</span>
                  <span v-show="item.houseGenre">{{ item.houseGenre }}</span>
                </div>
                <div v-show="item.listedPrice != '面议'" class="title3">
                  {{ item.listedPrice }}万<span>
                    <span
                      >{{
                        ((item.listedPrice * 10000) / item.coveredArea).toFixed(
                          2
                        )
                      }} </span
                    >元/m<span class="up">2</span></span
                  >
                </div>
                <div v-show="item.listedPrice == '面议'" class="title3">
                  {{ item.listedPrice }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-show="samehouselist.length == 0" class="nohouse">
          <img src="../../assets/nohouse.png" alt="" />
          <div>暂无相似楼盘房源</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBuyhouselist } from "../../apis/house";
import local from "../../utils/local";
export default {
  data() {
    return {
      time: 10,
      data: {},
      samehouselist: [],
      currentPage: 1,
      perPage: 10,
      loading: false,
    };
  },
  created() {
    this.city = local.get("city");
    this.data = JSON.parse(local.get("buyquerydata"));
    this.getHouse();
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    jumptoeva() {
      this.$router.push({ path: "/buyevaluate" });
    },
    jumptobuyseek() {
      this.$router.push({ path: "/buyseek" });
    },
    async getHouse() {
      if (local.get("citycode")) {
        await getBuyhouselist({
          citycode: local.get("citycode"),
          currentPage: this.currentPage,
          perPage: this.perPage,
        }).then((response) => {
          this.samehouselist = response.result.list;
          if (this.samehouselist.length == 10) {
            this.loading = true;
          }
        });
      } else {
        await getBuyhouselist({
          currentPage: this.currentPage,
          perPage: this.perPage,
        }).then((response) => {
          this.samehouselist = response.result.list;
          if (this.samehouselist.length == 10) {
            this.loading = true;
          }
        });
      }
    },
    jumptobuydetail(e, item) {
      let list = JSON.parse(local.get("todaybuyhouselist"));
      for (let i = 0; i < list.length; i++) {
        if (list[i].houseId == item.houseId) {
          list.splice(i, 1);
        }
      }
      list.unshift(item);
      local.set("todaybuyhouselist", JSON.stringify(list));
      local.set("houseId", e);
      this.$router.push({ path: "/buyhousedetail" });
    },
    changebuyhouse() {
      if (this.loading) {
        this.currentPage++;
        if (local.get("citycode")) {
          getBuyhouselist({
            citycode: local.get("citycode"),
            currentPage: this.currentPage,
            perPage: this.perPage,
          }).then((response) => {
            if (response.result.list.length != 10) {
              this.loading = false;
            }
            this.samehouselist = response.result.list;
          });
        } else {
          getBuyhouselist({
            currentPage: this.currentPage,
            perPage: this.perPage,
          }).then((response) => {
            if (response.result.list.length != 10) {
              this.loading = false;
            }
            this.samehouselist = response.result.list;
          });
        }
      } else {
        this.$toast("没有更多房源了");
      }
    },
    follow() {
      this.$toast("跟踪房价功能更新中");
    },
  },
};
</script>

<style scoped lang="less">
.header {
  position: fixed;
  left: 0;
  top: 0;
  padding: 10px 15px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: 15px;
}
.space {
  height: 50px;
}
.content {
  margin: 10px 15px 0;
  .name {
    margin: 0 10px 10px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }
  .address {
    margin: 10px 10px 30px;
    font-size: 13px;
  }
  .newprice {
    margin: 0 10px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      &:last-child {
        font-size: 15px;
        color: #45b7cb;
        border: 1px solid #45b7cb;
        padding: 8px 25px;
        border-radius: 20px;
        font-weight: normal;
      }
    }
  }
  .showpri {
    display: flex;
    justify-content: space-between;
    margin: 0 10px;
    align-items: center;
    > div {
      text-align: center;
      width: 50%;
      font-size: 12px;
      color: #333;
      &:first-child {
        border-right: 1px solid #f1f1f1;
      }
      .tip {
        display: flex;
        align-items: center;
        justify-content: center;
        .box {
          font-size: 20px;
          font-weight: bold;
        }
        .up {
          color: #d43b33;
        }
        .down {
          color: #22a44c;
        }
        .uptip {
          vertical-align: span-top;
          font-size: 10px;
        }
        .triangledown {
          width: 0;
          height: 0;
          border-top: 6px solid #22a44c;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
        }
      }
    }
  }
  .service {
    margin: 15px 0;
    display: flex;
    justify-content: space-between;
    > div {
      width: 48%;
      height: 90px;
      font-size: 12px;
      padding: 22px 10px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      div {
        &:first-child {
          font-weight: bold;
          font-size: 18px;
          span {
            font-size: 20px;
          }
        }
      }
    }
    .onebox {
      color: #d11919;
      background: url("../../assets/buyre01.png") no-repeat 0px 0px;
      background-size: 100% 100%;
    }
    .twobox {
      color: #736502;
      background: url("../../assets/buyre02.png") no-repeat 0px 0px;
      background-size: 100% 100%;
    }
  }
  .sell {
    .words {
      margin: 10px 0;
      font-size: 16px;
      font-weight: bold;
    }
    .house {
      display: flex;
      padding: 15px 0;
      border-bottom: 1px solid #f1f1f1;
      img {
        width: 120px;
        height: 110px;
      }
      .intrduce {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 10px;
        width: 200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        .title1 {
          font-size: 16px;
          font-weight: 550;
          color: #333333;
        }
        .title2 {
          font-size: 12px;
          color: #a0a0a0;
          span {
            margin: 0 2px;
          }
        }
        .tips {
          span {
            font-size: 10px;
            display: inline-block;
            margin-right: 5px;
            padding: 2px;
            background-color: #ebfafd;
            color: #4daac1;
          }
        }
        .title3 {
          color: #d43b33;
          font-size: 16px;
          font-weight: bold;
          span {
            color: #666;
            font-size: 12px;
            margin-left: 3px;
          }
          .up {
            vertical-align: span-top;
            font-size: 10px;
          }
        }
      }
    }
  }
}
.tipsword {
  margin: 10px 0;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: normal;
  }
}
.same {
  margin: 10px 0;
  .house {
    background-color: #fff;
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #f1f1f1;
    img {
      width: 120px;
      height: 110px;
    }
    .intrduce {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 10px;
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      .title1 {
        font-size: 16px;
        font-weight: 550;
        color: #333333;
      }
      .title2 {
        font-size: 12px;
        color: #a0a0a0;
        span {
          margin: 0 2px;
        }
      }
      .tips {
        span {
          font-size: 10px;
          display: inline-block;
          margin-right: 5px;
          padding: 0px 2px;
          border: 1px solid #45b7cb;
          color: #45b7cb;
        }
      }
      .title3 {
        color: #d43b33;
        font-size: 16px;
        font-weight: bold;
        span {
          color: #999;
          font-size: 12px;
          margin-left: 6px;
        }
      }
    }
    .up {
      margin: 0px !important;
      font-size: 12px;
      vertical-align: super;
      transform: scale(calc(10 / 12));
    }
  }
  .nohouse {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 150px;
    }
    div {
      font-size: 14px;
      color: #333;
      font-weight: bold;
      margin-top: 20px;
    }
  }
}
</style>
